<template>
    <Back title="医生管理" doctor-view-sty="doctor">
        <!-- 头部按钮配置 -->
        <template #buttons>
            <el-button type="primary" size="small" plain>导入</el-button>
            <el-button type="primary" size="small" plain>导出</el-button>
            <el-button type="primary" size="small" plain>删除</el-button>
            <el-button @click="$router.push('doctor/add')" type="primary" size="small">新增医生信息</el-button>
        </template>
        <!-- 搜索框配置 -->
        <template #head>
            <!-- 
                placeholder: 下拉框空状态显示
                placeholderinp: 输入框空状态提示
                allSelect: 下拉列表的数据
                v-on:selectOption: 反向监听下拉列表的数据变化
                v-on:seachName: 绑定搜索按钮的点击事件
                v-on:seachValue="seachValue": 反向监听搜索框的数据变化
             -->

            <Head placeholder="请选择科室" placeholderinp="请输入医生姓名" :allSelect="allRoom" v-on:selectOption="selectOption"
                v-on:seachName="seachName" v-on:seachValue="seachValue" />
        </template>
        <!-- 表格主体配置 -->
        <template #table_body>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">

                <el-table-column type="selection" prop="item.prop" label="item.label" fixed></el-table-column>
                <el-table-column prop="name" label="医生姓名" width="100" fixed></el-table-column>
                <el-table-column prop="head" label="医生头像" width="100">
                    <template slot-scope="scope">
                        <el-avatar :src="scope.row.head"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="danger" label="院区" width="100"></el-table-column>
                <el-table-column prop="job" label="职称" width="100"></el-table-column>
                <el-table-column prop="room" label="科室" width="150"></el-table-column>
                <el-table-column prop="label" label="标签" width="200px">
                    <template slot-scope="scope">

                        <el-tag v-for="(tag, index) in scope.row.label" :key="index" size="mini" :type="tag.type">
                            {{ tag.name }}
                        </el-tag>

                    </template>

                </el-table-column>
                <el-table-column prop="brief" label="医生简介" width="250px"></el-table-column>
                <el-table-column prop="operation" label="操作" fixed="right" width="100px">
                    <template slot-scope="scoped">
                        <i @click="changeDoctor(scoped.row)" class="el-icon-s-claim"></i>
                        <i @click="removeDoctor(scoped.row)" class="el-icon-delete-solid"></i>
                    </template>
                </el-table-column>

            </el-table>
        </template>
        <!-- 分页配置 -->
        <template #page>
            <Page :pageNum="data.length" :currentPage4="currentPage" v-on:handleSizeChange="handleSizeChange"
                v-on:select="selectChange" />
        </template>
    </Back>
</template>
<script>
// 导入自定义组件
import Back from '@/components/Part/BackColor.vue'
import Page from '@/components/Part/paga.vue'
import Head from '@/components/Part/tableHead.vue'
import { getDoctorList, getDoctorNameList, getDoctorRemove } from '@/api/Hospital/doctorApi'
export default {
    data() {
        return {
            // 当前页表格数据
            tableData: [],
            // 所有数据
            data: [],
            // 当前选中的行
            multipleSelection: [],
            // 所有可选科室
            allRoom: [],
            // 当前页码
            currentPage: 1,
            // 储存下拉列表的数据
            selectData: '',
            // 储存搜索框的数据
            seachData: '',
            // 记录当前每页多少行
            handleSize: 10,
        }
    },
    methods: {
        // 多选框事件
        handleSelectionChange(val) {
            // 表格选中的行的数组
        },
        // 切换页数的事件
        selectChange(val) {
            // 获取当前页数
            this.tableData = this.data.slice((val - 1) * this.handleSize, (this.handleSize * val))
            this.currentPage = val
        },
        // 获取当前所有科室
        getAllRoom(allData) {
            let all = []
            allData.forEach(element => {
                all.push(element.room)
            });
            this.allRoom = [...new Set(all)]
        },
        // 获取下拉列表选中的数据
        selectOption(val) {
            this.selectData = val
            if (val) {
                this.getSelectDoctorList()
            } else {
                this.getAllDoctorList()
            }
            this.currentPage = 1
        },
        // 获取输入框的数据
        seachValue(val) {
            this.seachData = val
        },
        // 请求所有医生的数据
        getAllDoctorList() {
            getDoctorList().then((res) => {
                this.data = res.data
                this.tableData = res.data.slice(0, this.handleSize)
                this.getAllRoom(res.data)
            })
        },
        // 请求下拉列表医生的数据
        getSelectDoctorList() {
            getDoctorNameList({ room: this.selectData, name: this.seachData }).then((res) => {
                // 前端不用处理这一句
                this.data = res.data.map((item) => {
                    item.room = this.selectData ? this.selectData : item.room
                    item.name = this.seachData ? this.seachData : item.name
                    return item
                })
                this.tableData = this.data.slice(0, this.handleSize)
            })
        },
        // 搜索事件
        seachName() {
            this.getSelectDoctorList()
        },
        // 修改医生信息
        changeDoctor(val) {
            this.$router.push({ path: '/Hospital/doctor/add?doctorId=' + val.doctorId })
        },
        // 删除事件
        removeDoctor(val) {
            this.$confirm('删除后无法恢复，确定要删除此条信息吗？', {
                title: '删除确定',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getDoctorRemove({ doctorId: val.doctorId }).then((res) => {
                    if (res.code == '200') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getAllDoctorList()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 获取当前每页多少行
        handleSizeChange(val) {
            this.handleSize = +val
            this.currentPage = 1
            this.tableData = this.data.slice(0, this.handleSize)
        }
    },
    mounted() {
        // 请求数据
        this.getAllDoctorList()
    },

    components: {
        Back,
        Page,
        Head
    }
}
</script>
<style lang="scss" scoped>
.el-avatar {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.el-tag--mini {
    border-radius: 999px;
    margin-right: 5px;
}
</style>
<style lang="scss">
[doctor-view-sty="doctor"] {
    .el-table__body-wrapper {
        min-height: 400px;
    }

    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        text-align: center;
    }

    .el-table td.el-table__cell div {
        font-size: 12px;
        // height:50px;
        line-height: 1;
        text-align: center;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .el-icon-s-claim {
        margin-right: 20px;
    }

    .el-icon-s-claim,
    .el-icon-delete-solid {
        color: rgb(0, 110, 255);
        font-size: 20px;
        cursor: pointer;
    }

}
</style>